<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备环境监测平台</title>
    <script src="js/jquery-2.2.1.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/guangxi.js"></script>
    <script src="js/index.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="container">
    <!-- 头部区域 -->
    <header class="header">
        <h1>设备环境监测平台大数据</h1>
        <div id="current-time" class="current-time">2025-06-17 23:00:00</div>
    </header>

    <!-- 左侧面板 -->
    <div class="left-panel">
        <h2>核心指标</h2>
        <div class="data-card">
            <span>本月订单数</span>
            <span>18,000</span>
        </div>
        <div class="data-card">
            <span>本月新增会员</span>
            <span>1,000</span>
        </div>
        <div class="data-card">
            <span>一次消费会员</span>
            <span>600</span>
        </div>

        <h2>设备状态</h2>
        <div class="data-card">
            <span>设备总数</span>
            <span>500</span>
        </div>
        <div class="data-card">
            <span>正常运行</span>
            <span>470</span>
        </div>
        <div class="data-card">
            <span>维护中</span>
            <span>20</span>
        </div>
        <div class="data-card">
            <span>故障设备</span>
            <span>10</span>
        </div>

        <h2>设备状态分布</h2>
        <div id="chart-status" class="chart-container"></div>
    </div>

    <!-- 中间面板 -->
    <div class="center-panel">
        <h2>设备分布地图</h2>
        <div id="chart-map" class="chart-container"></div>

        <h2>设备使用频率</h2>
        <div id="chart-frequency" class="chart-container"></div>
    </div>

    <!-- 右侧面板 -->
    <div class="right-panel">
        <h2>环境监测</h2>
        <div class="data-card">
            <span>当前温度</span>
            <span>23℃</span>
            <span class="status-indicator good">正常</span>
        </div>
        <div class="data-card">
            <span>当前湿度</span>
            <span>56%</span>
            <span class="status-indicator good">正常</span>
        </div>
        <div class="data-card">
            <span>信号强度</span>
            <span>-90dBm</span>
            <span class="status-indicator warning">较弱</span>
        </div>
        <div class="data-card">
            <span>光照强度</span>
            <span>250LX</span>
            <span class="status-indicator good">正常</span>
        </div>

        <h2>环境指标趋势</h2>
        <div id="chart-environment" class="chart-container"></div>

        <h2>最近维保记录</h2>
        <div class="table-container">
            <table>
                <thead>
                <tr>
                    <th>维护时间</th>
                    <th>维保人</th>
                    <th>维保内容</th>
                    <th>状态</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>2025-06-16 08:30</td>
                    <td>张伟</td>
                    <td>设备巡检</td>
                    <td>已完成</td>
                </tr>
                <tr>
                    <td>2025-06-15 14:15</td>
                    <td>李娜</td>
                    <td>软件升级</td>
                    <td>已完成</td>
                </tr>
                <tr>
                    <td>2025-06-12 10:45</td>
                    <td>王强</td>
                    <td>硬件更换</td>
                    <td>已完成</td>
                </tr>
                <tr>
                    <td>2025-06-10 09:20</td>
                    <td>张伟</td>
                    <td>故障排除</td>
                    <td>已完成</td>
                </tr>
                <tr>
                    <td>2025-06-08 16:00</td>
                    <td>李娜</td>
                    <td>设备校准</td>
                    <td>已完成</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>